<template>
    <div>
        <div class="community_nav" ref="navbar">
                <span @click="navigateTo('index')">首页</span>
                <span @click="navigateTo('community_specialcolumn')">专栏</span>
                <span @click="navigateTo('life')">我的</span>
                <span @click="navigateTo('community_delivery')">创作</span>
            </div>
    </div>
</template>

<script setup>
import { ref, inject } from "vue";
import { useRouter } from "vue-router";
const Router = useRouter();
const navigateTo = function (section) {
    if (show_global_button.value) {
        Router.push({ name: `${section}` });
    } else {
        const route = Router.resolve({ name: `${section}` });
        window.open(route.href, '_blank');
    }
};
let show_global_button = inject('global_button');
</script>

<style  scoped>
.community_nav {
    color: white; /* 文字颜色为白色 */
    font-size: 16px;
    padding: 15px 0; /* 上下留白 */
    text-align: center;
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, #ac85d6, #6397f1); /* 渐变色背景 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    border-radius: 0 0 20px 20px; /* 底部圆角 */
    transition: all 0.3s ease; /* 平滑过渡 */
}

.community_nav.sticky {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    border-radius: 0; /* 固定时取消圆角 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 固定时阴影加深 */
}

.community_nav > span {
    font-size: 18px;
    margin: 0 20px; /* 增加间距 */
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8); /* 半透明文字 */
    padding: 10px 15px; /* 增加内边距 */
    border-radius: 25px; /* 圆角 */
    transition: all 0.3s ease; /* 平滑过渡 */
}

.community_nav > span:hover {
    color: white; /* 悬停时文字颜色变为纯白 */
    background-color: rgba(255, 255, 255, 0.1); /* 悬停时背景微亮 */
    transform: scale(1.05); /* 悬停时稍微放大 */
}

.community_nav > span:active {
    transform: scale(0.95); /* 点击时稍微缩小 */
}


</style>